# Input

The `<Input>` component is used in a form in order to retrieve input from the user.

## Import

```jsx
import { Input, InputField } from 'bumbag'
```

## Usage

```live
###tab=Default,type=jsx-live
<Input placeholder="Enter your name here..." />###

###tab=Filled,type=jsx-live
<Input placeholder="Enter your name here..." variant="filled" />###

###tab=Borderless,type=jsx-live
<Input placeholder="Enter your name here..." variant="borderless" />###

###tab=Underline,type=jsx-live
<Input placeholder="Enter your name here..." variant="underline" />###
```

### Labels

```live
###tab=Default,type=jsx-live
<Input label="Username" />###

###tab=Filled,type=jsx-live
<Input label="Username" variant="filled" />###

###tab=Borderless,type=jsx-live
<Input label="Username" variant="borderless" />###

###tab=Underline,type=jsx-live
<Input label="Username" variant="underline" />###
```

If you want to have the label contained within the bounds of the input field, supply the `containLabel` prop:

```live
###tab=Default,type=jsx-live
<Input containLabel label="Username" />###

###tab=Filled,type=jsx-live
<Input containLabel label="Username" variant="filled" />###
```

### Fields

You can also use the `<InputField>` component, which internally has a [FieldWrapper](/form/field-wrapper) to wrap form controls such as labels, hint text and validation text.

It accepts a combination of [Input props](/form/input/#props) and [FieldWrapper props](/form/field-wrapper/#props).

```live
###tab=Default,type=jsx-live
<InputField label="Username" placeholder="Enter your name here..." />###

###tab=Filled,type=jsx-live
<InputField label="Username" placeholder="Enter your name here..." variant="filled" />###

###tab=Borderless,type=jsx-live
<InputField label="Username" placeholder="Enter your name here..." variant="borderless" />###

###tab=Underline,type=jsx-live
<InputField label="Username" placeholder="Enter your name here..." variant="underline" />###
```

### Default values

For uncontrolled inputs, set a default value using the `defaultValue` prop.

```live
###tab=Default,type=jsx-live
<Input defaultValue="Bumbags rock!" />###

###tab=Filled,type=jsx-live
<Input defaultValue="Bumbags rock!" variant="filled" />###

###tab=Borderless,type=jsx-live
<Input defaultValue="Bumbags rock!" variant="borderless" />###

###tab=Underline,type=jsx-live
<Input defaultValue="Bumbags rock!" variant="underline" />###
```

### Disabled

Make the input disabled with the `disabled` prop.

```live
###tab=Default,type=jsx-live
<Input disabled defaultValue="Disabled field" />###

###tab=Filled,type=jsx-live
<Input disabled defaultValue="Disabled field" variant="filled" />###

###tab=Borderless,type=jsx-live
<Input disabled defaultValue="Disabled field" variant="borderless" />###

###tab=Underline,type=jsx-live
<Input disabled defaultValue="Disabled field" variant="underline" />###
```

### Loading

Show a loading indicator with the `isLoading` prop.

```live
###tab=Default,type=jsx-live
<Input isLoading />###

###tab=Filled,type=jsx-live
<Input isLoading variant="filled" />###

###tab=Borderless,type=jsx-live
<Input isLoading variant="borderless" />###

###tab=Underline,type=jsx-live
<Input isLoading variant="underline" />###
```

### Types

Just like normal `<input>` elements, you can specify a `type`.

```live
###tab=Default,type=jsx-live
<Stack spacing="major-1">
  <Input type="number" />
  <Input type="tel" />
  <Input type="date" />
  <Input type="email" />
  <Input type="password" />
  <Input type="search" />
  <Input type="time" />
  <Input type="url" />
</Stack>###

###tab=Filled,type=jsx-live
<Stack spacing="major-1">
  <Input type="number" variant="filled" />
  <Input type="tel" variant="filled" />
  <Input type="date" variant="filled" />
  <Input type="email" variant="filled" />
  <Input type="password" variant="filled" />
  <Input type="search" variant="filled" />
  <Input type="time" variant="filled" />
  <Input type="url" variant="filled" />
</Stack>###

###tab=Borderless,type=jsx-live
<Stack spacing="major-1">
  <Input type="number" variant="borderless" />
  <Input type="tel" variant="borderless" />
  <Input type="date" variant="borderless" />
  <Input type="email" variant="borderless" />
  <Input type="password" variant="borderless" />
  <Input type="search" variant="borderless" />
  <Input type="time" variant="borderless" />
  <Input type="url" variant="borderless" />
</Stack>###

###tab=Underline,type=jsx-live
<Stack spacing="major-1">
  <Input type="number" variant="underline" />
  <Input type="tel" variant="underline" />
  <Input type="date" variant="underline" />
  <Input type="email" variant="underline" />
  <Input type="password" variant="underline" />
  <Input type="search" variant="underline" />
  <Input type="time" variant="underline" />
  <Input type="url" variant="underline" />
</Stack>###
```

### Sizes

An input can come in different sizes - `small`, `medium`, `large`, or the default.

```live
###tab=Default,type=jsx-live
<Stack spacing="major-1">
  <Input size="small" />
  <Input />
  <Input size="medium" />
  <Input size="large" />
</Stack>###

###tab=Filled,type=jsx-live
<Stack spacing="major-1">
  <Input size="small" variant="filled" />
  <Input variant="filled" />
  <Input size="medium" variant="filled" />
  <Input size="large" variant="filled" />
</Stack>###

###tab=Borderless,type=jsx-live
<Stack spacing="major-1">
  <Input size="small" variant="borderless" />
  <Input variant="borderless" />
  <Input size="medium" variant="borderless" />
  <Input size="large" variant="borderless" />
</Stack>###

###tab=Underline,type=jsx-live
<Stack spacing="major-1">
  <Input size="small" variant="underline" />
  <Input variant="underline" />
  <Input size="medium" variant="underline" />
  <Input size="large" variant="underline" />
</Stack>###
```

### States

An input can use different states (as per palette) such as `danger`, `success` and `warning`.

```live
###tab=Default,type=jsx-live
<Stack spacing="major-1">
  <Input state="danger" />
  <Input state="success" />
  <Input state="warning" />
  <Input state="primary" />
</Stack>###

###tab=Filled,type=jsx-live
<Stack spacing="major-1">
  <Input state="danger" variant="filled" />
  <Input state="success" variant="filled" />
  <Input state="warning" variant="filled" />
  <Input state="primary" variant="filled" />
</Stack>###

###tab=Borderless,type=jsx-live
<Stack spacing="major-1">
  <Input state="danger" variant="borderless" />
  <Input state="success" variant="borderless" />
  <Input state="warning" variant="borderless" />
  <Input state="primary" variant="borderless" />
</Stack>###

###tab=Underline,type=jsx-live
<Stack spacing="major-1">
  <Input state="danger" variant="underline" />
  <Input state="success" variant="underline" />
  <Input state="warning" variant="underline" />
  <Input state="primary" variant="underline" />
</Stack>###
```

### Colors

```live
###tab=Default,type=jsx-live
<Stack spacing="major-1">
  <Input palette="primary" placeholder="Enter your name..." />
  <Input palette="secondary" placeholder="Enter your name..." />
  <Input palette="danger" placeholder="Enter your name..." />
  <Input palette="success" placeholder="Enter your name..." />
  <Input palette="warning" placeholder="Enter your name..." />
</Stack>###

###tab=Filled,type=jsx-live
<Stack spacing="major-1">
  <Input palette="primary" placeholder="Enter your name..." variant="filled" />
  <Input palette="secondary" placeholder="Enter your name..." variant="filled" />
  <Input palette="danger" placeholder="Enter your name..." variant="filled" />
  <Input palette="success" placeholder="Enter your name..." variant="filled" />
  <Input palette="warning" placeholder="Enter your name..." variant="filled" />
</Stack>###

###tab=Borderless,type=jsx-live
<Stack spacing="major-1">
  <Input palette="primary" placeholder="Enter your name..." variant="borderless" />
  <Input palette="secondary" placeholder="Enter your name..." variant="borderless" />
  <Input palette="danger" placeholder="Enter your name..." variant="borderless" />
  <Input palette="success" placeholder="Enter your name..." variant="borderless" />
  <Input palette="warning" placeholder="Enter your name..." variant="borderless" />
</Stack>###

###tab=Underline,type=jsx-live
<Stack spacing="major-1">
  <Input palette="primary" placeholder="Enter your name..." variant="underline" />
  <Input palette="secondary" placeholder="Enter your name..." variant="underline" />
  <Input palette="danger" placeholder="Enter your name..." variant="underline" />
  <Input palette="success" placeholder="Enter your name..." variant="underline" />
  <Input palette="warning" placeholder="Enter your name..." variant="underline" />
</Stack>###
```

### Addons

You can use the [Group component](/components/group) to add on stuff to your `<Input>`.

```jsx-live
<Group>
  <Input width="100%" />
  <Button>Send</Button>
</Group>
```

### Icons

**Note:** To use input icons, you will need to follow the [instructions to set up icons with Bumbag](/components/icon).

```live
###tab=Default,type=jsx-live
<Stack spacing="major-1">
  <Input
    before={<Input.Icon icon="solid-search" />}
    placeholder="Jake Moxey"
  />
  <Input
    after={<Input.Icon icon="solid-search" />}
    placeholder="Jake Moxey"
  />
</Stack>###

###tab=Filled,type=jsx-live
<Stack spacing="major-1">
  <Input
    before={<Input.Icon icon="solid-search" />}
    placeholder="Jake Moxey"
    variant="filled"
  />
  <Input
    after={<Input.Icon icon="solid-search" />}
    placeholder="Jake Moxey"
    variant="filled"
  />
</Stack>###

###tab=Borderless,type=jsx-live
<Stack spacing="major-1">
  <Input
    before={<Input.Icon icon="solid-search" />}
    placeholder="Jake Moxey"
    variant="borderless"
  />
  <Input
    after={<Input.Icon icon="solid-search" />}
    placeholder="Jake Moxey"
    variant="borderless"
  />
</Stack>###

###tab=Underline,type=jsx-live
<Stack spacing="major-1">
  <Input
    before={<Input.Icon icon="solid-search" />}
    placeholder="Jake Moxey"
    variant="underline"
  />
  <Input
    after={<Input.Icon icon="solid-search" />}
    placeholder="Jake Moxey"
    variant="underline"
  />
</Stack>###
```

#### Addons

```jsx-live
<InputField
  addonBefore={<Button isStatic>$</Button>}
  label="Price"
/>
```

```jsx-live
<InputField
  addonAfter={<Button isStatic>km</Button>}
  label="Distance"
/>
```

### Controlled Usage

The previous examples are examples of uncontrolled usage. To control the value yourself, use a combination of `onChange` and `value`.

Note: Do not use `defaultValue` with controlled inputs!

```function-live
function Example() {
  const [value, setValue] = React.useState('');

  return <Input onChange={e => setValue(e.target.value)} value={value} />
}
```

## Accessibility

### Rules

- The input must have an accessible label specified via the `InputField` component, or an `aria-label`/`aria-labelledby` prop, or a `htmlFor`/`id` label pair.

**via an `InputField` component**

```jsx
<InputField label="First name" />
```

**via an `aria-label`/`aria-labelledby` prop**

```jsx
<Input aria-label="First name" />
```

**via a `htmlFor`/`id` label pair**

```jsx
<Label htmlFor="firstName">First name</Label>
<Input id="firstName" />
```

## Accessibility

#### Patterns

- If an input is required, then `aria-required` is set to `true` for the input.
- If an input is invalid, then `aria-invalid` is set to `true` for the input.

## Props

### Input Props

<!-- Automatically generated -->

**<Code fontSize="150" marginRight="major-1">after</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">autoComplete</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">autoFocus</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Automatically focus on the input

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">before</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">containLabel</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

If the `label` prop is supplied, is it contained inside the input?

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">defaultValue</Code>** <Code fontSize="100" palette="primary">string | string[]</Code> 

Default value of the input

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">disabled</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Disables the input

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">inputProps</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`{
  unstable_system?: any;
  top?: any;
  right?: any;
  bottom?: any;
  left?: any;
  children?: string | number | boolean | {
     | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ... 47 more ... | (ReactPortal...`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">inputRef</Code>** <Code fontSize="100" palette="primary">((instance: any) =&#62; void) | RefObject&#60;any&#62;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">label</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">isLoading</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Adds a cute loading indicator to the input field

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">isRequired</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Makes the input required and sets aria-invalid to true

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">name</Code>** <Code fontSize="100" palette="primary">string</Code> 

Name of the input field

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">size</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`"default"
  | (string & {})
  | "small"
  | "medium"
  | "large"`}
</Code>

Alters the size of the input. Can be "small", "medium" or "large"

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">mask</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">max</Code>** <Code fontSize="100" palette="primary">string | number</Code> 

The maximum (numeric or date-time) value for the input. Must not be less than its minimum (min attribute) value.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">maxLength</Code>** <Code fontSize="100" palette="primary">number</Code> 

If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the maximum number of characters (in UTF-16 code units) that the user can enter. For other control types, it is ignored.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">min</Code>** <Code fontSize="100" palette="primary">string | number</Code> 

The minimum (numeric or date-time) value for this input, which must not be greater than its maximum (max attribute) value.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">minLength</Code>** <Code fontSize="100" palette="primary">number</Code> 

If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the minimum number of characters (in UTF-16 code points) that the user can enter. For other control types, it is ignored.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">multiple</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

This prop indicates whether the user can enter more than one value. This attribute only applies when the type attribute is set to email or file.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">palette</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">pattern</Code>** <Code fontSize="100" palette="primary">string</Code> 

Regex pattern to apply to the input

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">placeholder</Code>** <Code fontSize="100" palette="primary">string</Code> 

Hint text to display

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">readOnly</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

This prop prevents the user from modifying the value of the input. It is ignored if the value of the type attribute is hidden, range, color, checkbox, radio, file, or a button type (such as button or submit).

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">spellCheck</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Setting the value of this attribute to true indicates that the element needs to have its spelling and grammar checked. The value default indicates that the element is to act according to a default behavior, possibly based on the parent element's own spellcheck value. The value false indicates that the element should not be checked.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">step</Code>** <Code fontSize="100" palette="primary">string | number</Code> 

Works with the min and max attributes to limit the increments at which a numeric or date-time value can be set.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">state</Code>** <Code fontSize="100" palette="primary">string</Code> 

State of the input. Can be any color in the palette.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">type</Code>** <Code fontSize="100" palette="primary">string</Code> 

Specify the type of input.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">value</Code>** <Code fontSize="100" palette="primary">string | number | string[]</Code> 

Value of the input

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">onBlur</Code>** <Code fontSize="100" palette="primary">(event: FocusEvent&#60;HTMLInputElement&#62;) =&#62; void</Code> 

Function to invoke when focus is lost

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">onChange</Code>** <Code fontSize="100" palette="primary">(event: FormEvent&#60;HTMLInputElement&#62;) =&#62; void</Code> 

Function to invoke when input has changed

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">onFocus</Code>** <Code fontSize="100" palette="primary">(event: FocusEvent&#60;HTMLInputElement&#62;) =&#62; void</Code> 

Function to invoke when input is focused

<Divider marginTop="major-2" marginBottom="major-2" />

### InputField Props

<!-- Automatically generated -->

**<Code fontSize="150" marginRight="major-1">addonBefore</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>`}
</Code>

Addon component to the input (before). Similar to the addon components in Input.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">addonAfter</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>`}
</Code>

Addon component to the input (after). Similar to the addon components in Input.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">inputProps</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`Pick<BoxProps, "unstable_system"
  | "top"
  | "right"
  | "bottom"
  | "left"
  | "children"
  | "defaultChecked"
  | "defaultValue"
  | "suppressContentEditableWarning"
  | "suppressHydrationWarning"
  | ... 647 more ...
  | "themeKey"> & LocalInputProps`}
</Code>

Additional props for the Input component

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">orientation</Code>** <Code fontSize="100" palette="primary">&#34;horizontal&#34; | &#34;vertical&#34;</Code> 

If addonBefore or addonAfter exists, then the addons will render vertically.

<Divider marginTop="major-2" marginBottom="major-2" />

<details><Box use="summary" marginBottom="major-2">Inherits <strong><code>Input</code></strong> props</Box>

**<Code fontSize="150" marginRight="major-1">after</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">autoComplete</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">autoFocus</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Automatically focus on the input

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">before</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">containLabel</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

If the `label` prop is supplied, is it contained inside the input?

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">defaultValue</Code>** <Code fontSize="100" palette="primary">string | string[]</Code> 

Default value of the input

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">disabled</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Disables the input

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">inputRef</Code>** <Code fontSize="100" palette="primary">((instance: any) =&#62; void) | RefObject&#60;any&#62;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">label</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">isLoading</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Adds a cute loading indicator to the input field

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">isRequired</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Makes the input required and sets aria-invalid to true

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">name</Code>** <Code fontSize="100" palette="primary">string</Code> 

Name of the input field

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">size</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`"default"
  | (string & {})
  | "small"
  | "medium"
  | "large"`}
</Code>

Alters the size of the input. Can be "small", "medium" or "large"

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">mask</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">max</Code>** <Code fontSize="100" palette="primary">string | number</Code> 

The maximum (numeric or date-time) value for the input. Must not be less than its minimum (min attribute) value.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">maxLength</Code>** <Code fontSize="100" palette="primary">number</Code> 

If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the maximum number of characters (in UTF-16 code units) that the user can enter. For other control types, it is ignored.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">min</Code>** <Code fontSize="100" palette="primary">string | number</Code> 

The minimum (numeric or date-time) value for this input, which must not be greater than its maximum (max attribute) value.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">minLength</Code>** <Code fontSize="100" palette="primary">number</Code> 

If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the minimum number of characters (in UTF-16 code points) that the user can enter. For other control types, it is ignored.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">multiple</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

This prop indicates whether the user can enter more than one value. This attribute only applies when the type attribute is set to email or file.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">palette</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">pattern</Code>** <Code fontSize="100" palette="primary">string</Code> 

Regex pattern to apply to the input

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">placeholder</Code>** <Code fontSize="100" palette="primary">string</Code> 

Hint text to display

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">readOnly</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

This prop prevents the user from modifying the value of the input. It is ignored if the value of the type attribute is hidden, range, color, checkbox, radio, file, or a button type (such as button or submit).

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">spellCheck</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Setting the value of this attribute to true indicates that the element needs to have its spelling and grammar checked. The value default indicates that the element is to act according to a default behavior, possibly based on the parent element's own spellcheck value. The value false indicates that the element should not be checked.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">step</Code>** <Code fontSize="100" palette="primary">string | number</Code> 

Works with the min and max attributes to limit the increments at which a numeric or date-time value can be set.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">state</Code>** <Code fontSize="100" palette="primary">string</Code> 

State of the input. Can be any color in the palette.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">type</Code>** <Code fontSize="100" palette="primary">string</Code> 

Specify the type of input.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">value</Code>** <Code fontSize="100" palette="primary">string | number | string[]</Code> 

Value of the input

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">onBlur</Code>** <Code fontSize="100" palette="primary">(event: FocusEvent&#60;HTMLInputElement&#62;) =&#62; void</Code> 

Function to invoke when focus is lost

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">onChange</Code>** <Code fontSize="100" palette="primary">(event: FormEvent&#60;HTMLInputElement&#62;) =&#62; void</Code> 

Function to invoke when input has changed

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">onFocus</Code>** <Code fontSize="100" palette="primary">(event: FocusEvent&#60;HTMLInputElement&#62;) =&#62; void</Code> 

Function to invoke when input is focused

<Divider marginTop="major-2" marginBottom="major-2" />

</details>
            

<details><Box use="summary" marginBottom="major-2">Inherits <strong><code>FieldWrapper</code></strong> props</Box>

**<Code fontSize="150" marginRight="major-1">children</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>
  | (({ elementProps }: { ...; }) => ReactNode)`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">description</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>`}
</Code>

Sets the description text of the field wrapper.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">hint</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>`}
</Code>

Sets the bottom hint text of the field wrapper.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">isOptional</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Sets the optional flag (and displays optional text) on the field wrapper.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">labelType</Code>** <Code fontSize="100" palette="primary">&#34;label&#34; | &#34;legend&#34;</Code> 

Sets the label type on the field wrapper.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">tooltip</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>`}
</Code>

Sets the tooltip of the field wrapper. Can be either a string, or a React component.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">tooltipTriggerComponent</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>`}
</Code>

Sets the tooltip trigger component.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">validationText</Code>** <Code fontSize="100" palette="primary">string</Code> 

Sets the bottom validation text of the field wrapper.

<Divider marginTop="major-2" marginBottom="major-2" />

</details>
            

<details><Box use="summary" marginBottom="major-2">Inherits <strong><code>Box</code></strong> props</Box>

**<Code fontSize="150" marginRight="major-1">use</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">className</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignX</Code>** <Code fontSize="100" palette="primary">&#34;right&#34; | &#34;left&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignY</Code>** <Code fontSize="100" palette="primary">&#34;top&#34; | &#34;bottom&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">variant</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">colorMode</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">overrides</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 96 more ...;
  Template?: TemplateThemeConfig;
}`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">elementRef</Code>** <Code fontSize="100" palette="primary">((instance: any) =&#62; void) | RefObject&#60;any&#62;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">themeKey</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

</details>
            

## Theming

### Input

<Theme
  component={'Input'}
  overrides={[
    'Input.styles.base',
    {key: 'Input.styles.placeholder', props: { placeholder: 'I am a placeholder' }},
    {key: 'Input.Wrapper.styles.base', props: { padding: 'major-2' }},
    {key: 'Input.Spinner.styles.base', props: { isLoading: true }}
  ]} />

### InputField

<Theme
  component={'InputField'}
  label="This is a label"
  overrides={[
    'InputField.styles.base'
  ]} />
